<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"   lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>系统菜单管理</title>
        <link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.5.4.5/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.5.4.5/themes/icon.css">
        <script src="/js/jquery-easyui-1.5.4.5/jquery.min.js"></script>
        <script src="/js/jquery-easyui-1.5.4.5/jquery.easyui.min.js"></script>
    </head>

    <body>
	    <table class="easyui-treegrid" title="菜单管理" style="width:98%;height:500px" id="table-grid"
			data-options="idField:'privillegeId',treeField:'privilName',singleSelect:true,collapsible:false,
			url:'/privilege/list',method:'get',toolbar:toolbar,pagination:true,pageSize:20">
		<thead>
			<tr>
				<th data-options="field:'privillegeId',checkbox:true"></th>
				<th data-options="field:'privilName',width:400,editor:{
				type:'text'
			}">菜单名称</th>
				<th data-options="field:'sysName',width:200,editor:{
				type:'combobox',
				options:{
							valueField:'sysId',
							textField:'sysName',
							url:'/dictionary/list?dicId=trade_sys',
							required:true
						}
			}">所属系统名称</th>
				<th data-options="field:'priviUrl',width:400,align:'right',editor:{
				type:'text'
				}">访问地址</th>
				<!-- <th data-options="field:'priviIcon',width:80,align:'right'">菜单图标</th> -->
				<th data-options="field:'priviStatus',width:100,editor:{
				type:'combobox',
				options:{
							valueField:'priviStatus',
							textField:'statusName',
							data:[{'priviStatus':'1','statusName':'有效'},{'priviStatus':'0','statusName':'无效'}],
							required:true
						}
			},formatter: function(value,row,index){
				if(value == '0') return '无效';
				if(value == '1') return '有效';
			}">菜单状态</th>
			</tr>
		</thead>
	</table>
<!-- 菜单页面元素相关操作 -->
	<div id="elementWindows" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:800px;height:500px;padding:10px;overflow: hidden;">
		 <table class="easyui-datagrid" title="菜单功能管理" style="width:98%;height:450px" id="element-grid"
			data-options="singleSelect:false,collapsible:false,method:'get',pagination:false,idField:'elementId',toolbar:elementToolbar">
		<thead>
			<tr>				
				<th data-options="field:'elementId',width:100">页面元素编号</th>
				<th data-options="field:'privilegeId',width:100">菜单编号</th>
				<th data-options="field:'elementName',width:200">元素名称</th>
			</tr>
		</thead>
	</table>
	</div>
	<div id="elementSaveWindows" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:400px;height:300px;padding:10px;">
		<form id="elementForm" class="easyui-form" method="post" data-options="novalidate:true">
			<table>
				<tr>
					<td width="80px">页面元素编号:</td>
	    			<td>
	    				<input class="easyui-textbox" type="text" name="elementId" id="elementId" data-options="required:true" width='60px'></input>
	    			</td>
				</tr>
				<tr>
					<td>菜单编号:</td>
	    			<td>
	    				<input class="easyui-textbox" type="text" name="privilegeId" id="privilegeId" data-options="readonly:true" width="80px"></input>
	    			</td>
				</tr>			
				<tr>
					<td>元素名称:</td>
	    			<td>
	    				<input class="easyui-textbox" type="text" name="elementName" id="elementName" data-options="required:true" width="100px"></input>
	    				<input id="insertMark" name='insertMark' type="hidden" value="0">
					</td>
				</tr>
				<tr>
				<td><input type='button' onclick="submitForm();" value='保存'/></td>
				<td><input type='button' onclick="$('#elementSaveWindows').window('close');" value='取消'/></td>
				</tr>
			</table>
		</form>
	</div>
  <script src="/js/dataGrid.js"></script>
  <script type="text/javascript">		
	//dataGrid工具栏
	var toolbar = [{
				text:'新增',
				iconCls:'icon-add',
				handler:function(){
					var tt = $('#table-grid');
					var node = tt.treegrid('getSelected');
					var sysId = null;
					var nodeId = null;
					var pId = null;
					if(node){
						sysId = node.systemId;
						nodeId = node.privillegeId;
						pId = node.privillegeId;
					}
					tt.treegrid("append",{
						parent: nodeId,
						data:[{privillegeId:"",systemId:sysId, privilName:"",priviUrl:"",priviStatus:"1",parentId:pId}]
					});					
				}
			},{
				text:'编辑',
				iconCls:'icon-edit',
				handler:function(){
					var tt = $('#table-grid');
					var row=tt.treegrid('getSelected');
					var rowId =row.privillegeId;
					if(rowId >=0){
						tt.treegrid('beginEdit',rowId);
						/*
						var ed = tt.treegrid('getEditor',{id:rowId,field:'sysName'});
						var data= $(ed.target).combobox('getData');
						$(ed.target).combobox('loadData', []);
						data= $(ed.target).combobox('getData');
						data[0] = {value:"", text:"全部"};
						data[1] = {value:"1", text:"11"};
						data[2] = {value:"2", text:"22"};
						//url:'/tradeSys/list?needSplitPage=false',
						$(ed.target).combobox('loadData', data);
						*/
						 $("div.datagrid-toolbar [id ='save']").eq(0).show(); 
						 $("div.datagrid-toolbar [id ='cancel']").eq(0).show(); 
					}
				}
			},{
				text:'删除',
				iconCls:'icon-remove',
				handler:function(){
							var tt = $('#table-grid');
							var row=tt.treegrid('getSelected');
							if(row == null){
								$.messager.alert('Warning','请选择要删除的行！');
							}
					$.messager.confirm('提示','您确定要删除吗？',function (r){
						if(r){
							$.ajax({
								   type: "POST",
								   dataType:"json",
								   url: "/privilege/del",
								   data: {privillegeId:row.privillegeId},
								   success: function(msg){
								     if(msg){
								    	 $.messager.alert('Warning',msg.retMsg);
								    	 $('#table-grid').treegrid('reload');
								     }
								   }
								});
						}
					});
				}
			},'-',{
				text:'页面功能维护',
				iconCls:'icon-large-smartart',
				handler:function(){
					var tt = $('#table-grid');
					var row=tt.treegrid('getSelected');
					if(row == null){
						$.messager.alert('Warning','请选择要操作的行！');
					}

					$("#element-grid").datagrid({
						url:'/baseControl/GET/cn.com.fig.dao.ElementMapper.list',
						queryParams:{
							privilegeId:row.privillegeId,
							needSplitPage:false
						}
					});
					
					$("#elementWindows").window('open');
				}
			},'-',{
				id:'save',
				text:'保存',
				iconCls:'icon-save',
				handler:function(){
					var tt = $('#table-grid');
					var row=tt.treegrid('getSelected');
					var rowId =row.privillegeId;
					var sysId_old = row.sysName;
					tt.treegrid('endEdit',rowId);
					var sysId = row.sysName;
					/*如果sysId_old == sysId，说明没有修改过所属系统名称，则systemId取row.systemId;
					    反之，systemId取row.sysName才能得到正确得接入系统编号。*/
					if(sysId_old == sysId){
						sysId = row.systemId;
					}
					$.ajax({
						   type: "POST",
						   dataType:"json",
						   url: "/privilege/save",
						   data: {privillegeId:row.privillegeId,systemId:sysId,privilName:row.privilName, priviUrl:row.priviUrl,
							   parentId:row._parentId,priviStatus:row.priviStatus},
						   success: function(msg){
						     if(msg){
						    	 $.messager.alert('Warning',msg.retMsg);
								 $("div.datagrid-toolbar [id ='save']").eq(0).hide(); 
								 $("div.datagrid-toolbar [id ='cancel']").eq(0).hide(); 
								 tt.treegrid('reload');
						     }
						   }
						});
				}
			},{
				id:'cancel',
				text:'取消',
				iconCls:'icon-cancel',
				handler:function(){
					var tt = $('#table-grid');
					var row=tt.treegrid('getSelected');
					var rowId =row.privillegeId;
					tt.treegrid('cancelEdit',rowId);
					$("div.datagrid-toolbar [id ='save']").eq(0).hide(); 
					$("div.datagrid-toolbar [id ='cancel']").eq(0).hide(); 
					if(row.privillegeId == null || row.privillegeId == ''){
						tt.treegrid("deleteRow",rowId);
					}
				}
			}];
	var elementToolbar = [{
		text:'新增',
		iconCls:'icon-add',
		handler:function(){
			var node = $('#table-grid').treegrid('getSelected');
			var nodeId = null;
			if(node){
				$('#elementId').textbox("setValue",node.privillegeId+"-");
				$('#privilegeId').textbox("setValue",node.privillegeId);
				$("#insertMark").val("1");
				$("#elementSaveWindows").window('open');
			}					
		}
	},{
		text:'编辑',
		iconCls:'icon-edit',
		handler:function(){
			var tt = $('#element-grid');
			var row=tt.treegrid('getSelected');
			var rowId =row.elementId;
			if(row){
				$('#elementId').textbox("setValue",row.elementId);
				$('#privilegeId').textbox("setValue",row.privilegeId);
				$('#elementName').textbox("setValue",row.elementName);
				$('#elementId').textbox("readonly",true);
				$("#insertMark").val("0");
				$("#elementSaveWindows").window('open');
			}
		}
	},{
		text:'删除',
		iconCls:'icon-remove',
		handler:function(){
					var tt = $('#element-grid');
					var row=tt.treegrid('getSelected');
					if(row == null){
						$.messager.alert('Warning','请选择要删除的行！');
					}
			$.messager.confirm('提示','您确定要删除吗？',function (r){
				if(r){
					$.ajax({
						   type: "POST",
						   dataType:"json",
						   url: "/baseControl/DELETE/cn.com.fig.dao.ElementMapper.delete",
						   data: {priId:row.elementId},
						   success: function(msg){
						     if(msg){
						    	 $.messager.alert('Warning',msg.retMsg);
						    	 $('#element-grid').datagrid('reload');
						     }
						   }
						});
				}
			});
		}
	}];
		$(function(){
			$('#table-grid').treegrid({				
				onBeforeLoad:function(row, param){
					 $("div.datagrid-toolbar [id ='save']").eq(0).hide(); 
					 $("div.datagrid-toolbar [id ='cancel']").eq(0).hide(); 
				}		
			});
			
			$('#elementForm').form({
				url:"/baseControl/POST",
				onSubmit: function(){
					var isValid = $(this).form('validate');
					if (!isValid){
						$.messager.alert('Warning','请填写必填项');
					}
					return isValid;	
				},
				success:function(msg){
				     if(msg){
				    	 var data = eval('(' + msg + ')');
				    	 $.messager.alert('Warning',data.retMsg);
				    	 $("#element-grid").datagrid('reload');
				    	 $("#elementSaveWindows").window('close');
				     }
				}
			});
		});
		
		//用户表单提交方法
		function submitForm(){
			var insertMark = $('#insertMark').val();
			var reqUrl = ''
			if(insertMark == 0){
				reqUrl = '/baseControl/POST/cn.com.fig.dao.ElementMapper.update';
			}else{
				reqUrl = '/baseControl/PUT/cn.com.fig.dao.ElementMapper.insert';
			}
			
			$('#elementForm').form("submit",{
				url:reqUrl
			});	
		}
	</script>      
    </body>
</html>
